<template>
  <div id="VjList">
    <van-pull-refresh v-if="showRefresh" v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
        <div class="l-loading" v-if="!finished&&!list.length">
          <van-skeleton round :key="i" v-for="i in 6" title avatar :row="3"/>
        </div>
        <template v-else>
          <van-cell v-for="(item,k) in list" :key="k">
            <slot :item="item"/>
          </van-cell>
        </template>
      </van-list>
    </van-pull-refresh>
    <template v-else>
      <div class="l-loading" v-if="!finished&&!list.length">
        <van-skeleton round :key="i" v-for="i in 6" title avatar :row="3"/>
      </div>
      <van-list
          v-else-if="list.length"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
        <van-cell v-for="(item,k) in list" :key="k">
          <slot :item="item"/>
        </van-cell>
      </van-list>
      <van-image v-else class="a-empty" :src="placeholderPic"/>
    </template>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop} from "vue-property-decorator";

@Component
export default class VjList extends Vue implements ComponentOptions<Vue> {
  name = "VjList";
  loading = false;
  finished = false;
  refreshing = false;
  list: any[] = [];
  pageNo = 1;
  pageSize = 10;
  @Prop() loadMore!: Function;
  @Prop() showRefresh!: boolean;

  async onLoad() {
    this.loading = true;
    const list = (await this.loadMore(++this.pageNo, this.pageSize)) || [];
    this.loading = false;
    this.finished = !list.length;
    this.list = this.list.concat(list);
  }

  async onRefresh() {
    this.refreshing = true;
    this.pageNo = 1;
    this.list = (await this.loadMore(this.pageNo, this.pageSize)) || [];
    this.finished = !this.list.length;
    this.refreshing = false;
  }

  mounted(): void {
    this.onRefresh();
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#VjList {
  overflow-y: auto;
  .a-empty{
    width: 80%;
    margin: 10px auto;
    display: block;
  }
  /deep/ .l-loading {
    padding: 16px 0;
    background: #fff;
  }
}
</style>
